<template>
    <div class="topic-detail">
        <div class="question-content">
            <div class="bettwen-head">
                <div class="head-text">本题用时：{{ currentTopic.myDuration }}s</div>
                <div v-if="currentTopic.collectFlag === 0" class="collect-text"
                    style="display: flex; align-items: center;" @click="doCollect">
                    <uni-icons type="star" color="#003455" size="16"></uni-icons> &nbsp;&nbsp;收藏
                </div>
                <div v-if="currentTopic.collectFlag === 1" class="collect-text"
                    style="display: flex; align-items: center;" @click="doCollect">
                    <uni-icons type="star-filled" color="#FDB913" size="16"></uni-icons> &nbsp;&nbsp;已收藏
                </div>
            </div>
            <!-- 文章内容 -->
            <template v-if="currentTopic.passage && currentTopic.passage.content">
                <Acticle :article="content"></Acticle>
                <div class="line-blank-bold"></div>
            </template>
            
            <!-- 题干内容 -->
            <div class="question-text" v-if="currentTopic.question">
                <towxml :nodes="question"></towxml>
            </div>
            
            <!-- 数量关系题 quntity a b -->
            <div class="question-text" v-if="currentTopic.type === 'num-relation'">
                <!-- <div class="flex-start" v-for="(item, index) in addition" :key="index">
                    <label style="font-size: 28rpx; font-weight: bold; color: #333333; width: 180rpx;">Quantity
                        {{ item.code }}：</label>
                    <div style="flex: 1;" v-html="item.question"></div>
                </div> -->
                <div class="flex-start">
                    <label style="font-size: 28rpx; font-weight: bold; color: #333333; width: 180rpx;">Quantity
                        A：</label>
                    <towxml style="flex: 1;" :nodes="quantitya" class="text1"></towxml>
                </div>
                <div class="flex-start">
                    <label style="font-size: 28rpx; font-weight: bold; color: #333333; width: 180rpx;">Quantity
                        B：</label>
                    <towxml style="flex: 1;" :nodes="quantityb" class="text1"></towxml>
                </div>
            </div>
            
            <!-- 选项列表 -->
            <div class="question-text" style="padding: 30rpx 0 0 0;" v-if="currentTopic.items">
                <div class="answer-item" v-for="(sub, ind) in itemList" :key="ind">
                    <label>{{ sub.itemCode }}.</label> <div
                        style="padding-left:6rpx; display: inline-block;">
                            <towxml :nodes="sub.optionName"></towxml>
                        </div>
                </div>
            </div>
            <div class="line-blank-bold"></div>
            <div class="answer-blank">
                <div class="bettwen-head">
                    <div class="">我的答案：<label v-if="currentTopic.type !== 'sentence-select'" class="red"
                            :class="{'blue': currentTopic.answerStatus===1}">{{ currentTopic.answer }}</label></div>
                    <div class="time">{{ currentTopic.answerTime }} 作答</div>
                </div>
                <div v-if="currentTopic.type === 'sentence-select'">
                    <label class="red"
                        :class="{'blue': currentTopic.answerStatus===1}">{{ currentTopic.answer }}</label>
                </div>
                <div style="padding-top: 30rpx;">
                    正确答案：<label v-if="currentTopic.type !== 'sentence-select'"
                        style="color: #00C775;">{{ currentTopic.rightAnswer }}</label>
                </div>
                <div v-if="currentTopic.type === 'sentence-select'">
                    <label style="color: #00C775;">{{ currentTopic.rightAnswer }}</label>
                </div>
            </div>
            <!-- 解析部分 -->
            <template v-if="currentTopic.analysis">
                <div class="line-blank-bold"></div>
                <div class="answer-blank">
                    <div class="h3-text">题目解析</div>
                    <div style="padding: 10rpx 0;">
                        <towxml :nodes="analysis"></towxml>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
    import Acticle from './Article.vue'
    import towxmlFunc from '../joTowxml/index.js';
    import towxml from '../joTowxml/towxml.vue';
    export default {
        components: {
            Acticle,
            towxml
        },
        props: {
            currentTopic: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        data() {
            return {
                isContentOpen: false,
                isShowArticleIcon: false,
                itemList: [],
                question: '',
                content: '',
                addition: [],
                articleHeght:'auto',
                analysis: '',
                quantitya: '',
                quantityb: ''
            }
        },
        mounted() {
            this.formatSomeData()
            
        },
        watch: {

            currentTopic: {
                handler: function() {
                    this.formatSomeData()
                    // this.checkoutEemHeight()
                },
                deep: true
            }
        },
        methods: {
            // 格式化公式
            farmatMath(str) {
                if(!str) {
                    return ''
                }
                var regex = /[+\-*/=^()[\]{}]/;
                str = str.replace(/<img(.*?)src="(.*?)"(.*?)>/g, '<image$1src="$2"$3></image>');
                if (regex.test(str) && str.indexOf('$') != -1) {
                    // 处理数学公式的
                    str = str.replaceAll('<p>', '')
                    str = str.replaceAll('</p>', '')
                    str = str.replaceAll('&lt;', '<')
                    str = str.replaceAll('&gt;', '>')
                    var escapedString = str.replace(/["\n]/g, function(match) {
                      return {
                        '"': "'",
                        '\\': '\\\\',
                      }[match];
                    });
                    str = towxmlFunc(escapedString,'markdown');
                } else {
                    str = towxmlFunc(str,'html');
                }
                return str
            },
            // 处理选项图片
            formatSomeData() {
                this.itemList = []
                if (this.currentTopic.items && this.currentTopic.items.length > 0) {
                    this.currentTopic.items.forEach((item, index) => {
                        item.forEach((list, k) => {
                            let subList = {}
                            subList = Object.assign({}, list)
                            let itemName = list.itemName
                            if (itemName.includes('<img')) {
                                itemName = itemName.replace(/<img/g,
                                    '<img style="width:30%;display:block;"');
                            } else {
                                itemName = itemName;
                            }
                            subList.optionName = this.farmatMath(itemName)
                            this.itemList.push(subList)
                        });
                    })
                }
                
                if (this.currentTopic.type === 'num-relation') {
                    // this.addition = JSON.parse(this.currentTopic.addition)
                    const listData = JSON.parse(this.currentTopic.addition)
                    this.quantitya = listData[0].question
                    this.quantityb = listData[1].question
                    this.quantitya = this.farmatMath(this.quantitya)
                    this.quantityb = this.farmatMath(this.quantityb)
                }
                
                if (this.currentTopic.passage && this.currentTopic.passage.content) {
                    this.content = this.currentTopic.passage.content.replace(/<img/g,
                        '<img style="width:100%;display:block;"');
                } else {
                    this.content = ''
                }
                
                if (this.currentTopic.question) {
                    this.question = this.currentTopic.question.replace(/<img/g,
                        '<img style="width:100%;display:block;"');
                    this.question = this.farmatMath(this.question)
                } else {
                    this.question = ''
                }
                
                if (this.currentTopic.analysis) {
                    this.analysis = this.currentTopic.analysis.replace(/<img/g,
                        '<img style="width:100%;display:block;"');
                    this.analysis = this.farmatMath(this.analysis)
                } else {
                   this.analysis = '' 
                }
            },
            // 收藏
            doCollect() {
                this.$emit('doCollect')
            }
        }
    }
</script>

<style scoped lang="scss">
    .line-blank-bold {
        height: 6px;
        background: #f5f5f5;
        margin: 20rpx 0 20rpx 0;
    }

    .bettwen-head {
        display: flex;
        align-items: center;
        justify-content: space-between;

    }
    
    .contentAreaGre {
        line-height: 32rpx;
    }

    .head-text {
        color: #151515;
        font-size: 28rpx;
    }

    .collect-text {
        color: #003356;
        font-size: 28rpx;
    }

    .question-text {
        font-size: 26rpx;
        color: #333333;
        padding-top: 20rpx;
    }

    .min-area {
        height: 432rpx;
        overflow: hidden;
    }

    .fit-blank {
        height: 36rpx;
        line-height: 36rpx;
        text-align: center;
    }

    .answer-item {
        padding: 10rpx 0;
        display: flex;
    }

    .answer-blank {
        font-size: 26rpx;
        padding-bottom: 20rpx;
        color: #333333;

        .red {
            color: #FF2424;

        }

        .blue {
            color: #00C775;
        }

        .time {
            color: #999999;
            font-size: 24rpx;
        }
    }

    .h3-text {
        font-size: 28rpx;
        font-weight: bold;
        color: #333333;
    }

    .no-data {
        color: #999999;
        font-size: 26rpx;
        text-align: center;

        .square {
            margin: 0 auto;
            width: 148rpx;
            height: 148rpx;
            background-color: #E7E9F0;
            margin-top: 30rpx;
            margin-bottom: 20rpx;
        }
    }

    .flex-start {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
</style>